import { Injectable } from '@angular/core';
import * as _ from 'lodash';

@Injectable()
export class RoomEchartsService {
    // 0:白色；1：黑色
    theme = 0;

    // 法线的去重处理
    markLines = [];

    styles = {
        textColor: ['rgba(255,255,255,.4)', '#777'],
        lineColor: ['rgba(204,204,204,0.3)', 'rgba(13,13,13,0.5)'],
        dashedColor: ['#aaa', '#666'],
    };

    // 定制toolTip
    diyToolTip(v, ydata) {
        let html = '<div>';
        for (let i = 0; i < v.length; i++) {
            let value;
            if (i === 0) {
                html +=
                    '<div style=\'font-size:8px;color:#fff;line-height: 9px;margin-bottom: 6px;margin-top: 4px;\'>' +
                    v[i].axisValueLabel + ':00' +
                    '</div><div>';
            }
            if (v[i].data == null) {
                value = '-';
            } else {
                value = v[i].data;
            }
            html +=
                '<div style=\'font-size:6px;color:rgba(255,255,255,.5);line-height: 9px;margin-bottom: 3px;\'><span>' +
                v[i].seriesName +
                ':</span><span style=\'font-size:10px;margin-left:5px;color:' +
                v[i].color +
                '\'>' +
                value +
                '</span><span>' +
                (ydata[i].unit || '') +
                '</span></div>';
        }
        html += '</div></div>';
        return html;
    }

    showRoomParamsChart(chartData) {
        console.log('通讯状态', chartData)
        let dataSource;
        dataSource = {
            xdata: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23],
            ydata: [
                // {
                //     unit: '%RH',
                //     name: '湿度',
                //     data: [20, 21, 22, 32, 23, 12, 32, 20, 21, 22, 32, 23, 12, 32, 20, 21, 22, 32, 23, 12, 32, null, null, null],
                //     min: 0,
                //     max: 0
                // },
                // {
                //     unit: '℃',
                //     name: '温度',
                //     data: [152.9, 157.7, 118, 94.7, 100.8, 98.4, 117.6, 120.5, 117.7, 168, 187, 203.2, 206.1, 235.8, 178.7, null, null, null, null, null, null, null, null, null]
                //     min: 0,
                //     max: 0
                // },
            ]
        };
        for (let i = 0; i < chartData.length; i++) {
            let yobj; yobj = {};
            yobj.unit = chartData[i].unit || '';
            yobj.name = chartData[i].parameterName;
            yobj.min = chartData[i].min;
            yobj.max = chartData[i].max;
            yobj.data = [];
            for (let j = 0; j < chartData[i].point.length; j++) {
                yobj.data.push(chartData[i].point[j].y);
            }
            dataSource.ydata.push(yobj);
        }
        return this.setOptions(dataSource);
    }

    setOptions(dataSource) {
        console.log(dataSource);
        const option = {
            color: ['#12ead5', '#d3d3d3', '#b078ee'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    lineStyle: {
                        color: '#1fb5ff',
                    },
                },
                backgroundColor: 'rgba(52,52,52,0.88)',
                borderColor: '#515151',
                borderWidth: '0',
                formatter: v => {
                    return this.diyToolTip(v, dataSource.ydata);
                },
            },
            grid: {
                x: 25,
                y: 40,
                x2: 25,
                y2: 20,
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: dataSource.xdata,
                    splitLine: false,
                    axisLabel: {
                        interval: 'auto',
                        margin: 4,
                        textStyle: {
                            color: this.styles.textColor[this.theme],
                            fontSize: 8,
                        },
                    },
                    axisLine: { lineStyle: { color: this.styles.lineColor[this.theme] } },
                    axisTick: { show: false },
                },
            ],
            yAxis: this.setyAxis(dataSource),
           series: this.setSeries(dataSource)
        };


        return option;
    }

    // 设置y轴
    setyAxis(dataSource) {
        let yAxis; yAxis = [];
        for (let i = 0; i < dataSource.ydata.length; i++) {
            let each;
            let yname; // y轴名称
            yname = dataSource.ydata[i] && (dataSource.ydata[i].name + (dataSource.ydata[i].unit ? '(' + dataSource.ydata[i].unit + ')' : ''));
            let paddingSize = [0, 0, 0, 0];
            if (yname.length > 6) {
                if (i === 0) {
                    paddingSize = [0, 0, 0, (yname.length - 6) * 8];
                } else {
                    paddingSize = [0, (yname.length - 6) * 8, 0, 0];
                }
            }
            console.log(paddingSize)
            each = {
                type: 'value',
                name: yname,
                nameLocation: 'end',
                nameTextStyle: {
                    color: this.styles.textColor[this.theme],
                    fontSize: 8,
                    padding: paddingSize
                },
                axisLabel: {
                    color: this.styles.textColor[this.theme],
                    fontSize: 8,
                    align: i ? 'left' : 'right',
                    margin: 2,
                },
                axisLine: { show: false },
                axisTick: { show: false },
                splitNumber: 3,
                // min: dataSource.ydata[i].min,
                // max: dataSource.ydata[i].max,
                splitLine: {
                    lineStyle: {
                        color: this.styles.lineColor[this.theme],
                        opacity: 0.3
                    },
                },
            };
            yAxis.push(each);
        }
        return yAxis;
    }

    // 设置折线
    setSeries(dataSource) {
        let series; series = [];

        for (let i = 0; i < dataSource.ydata.length; i++) {
            let each;
            each = {
                name: dataSource.ydata[i].name,
                type: 'line',
                symbol: 'circle',
                symbolSize: 2,
                data: dataSource.ydata[i].data,
                itemStyle: {
                    normal: {
                        lineStyle: { width: 0.8 },
                    },
                    emphasis: {
                        borderWidth : 4
                    }
                },
                markLine: {
                    symbolSize: 0,
                    lineStyle: {
                        normal: {
                            color: this.styles.dashedColor[this.theme],
                            type: 'dashed',
                            width: 0.5,
                        },
                        emphasis: {
                            width: 0,
                        },
                    },
                }
            };
            series.push(each);
        }

        return series;
    }
}
